<!--
 * @Author: vera_min vera_min@163.com
 * @Date: 2025-07-20 21:21:52
 * @LastEditors: vera_min vera_min@163.com
 * @LastEditTime: 2025-08-22 00:57:47
 * @FilePath: /mail_project_destop/src/views/home/components/translateView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
   <div v-draggable class="wrap" v-loading="loading" element-loading-svg-view-box="0, 0, 1024, 1024" :element-loading-svg="LoadingSvg" :style="pos" v-if="visable" @contextmenu.stop="stop" @click.stop="stop">
    <div class="box-header title">翻译结果：</div>
    <div class="content" v-html="content"></div>
   </div>
</template>
    
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { LoadingSvg } from '/@/utils/loading';
  import commonApi from '/@/api/common';

  const visable = ref(false);
  const content = ref('');
  const pos = ref<any>({ left: 0, top: 0});
  const loading = ref(false);

  const stop = () => {};

  const translate = async (payload: any) => {
    const { position, data } = payload;
    pos.value.left = `${position.left}px`;
    pos.value.top = `${position.top}px`;
    visable.value = true;
    loading.value = true;

    const res = await commonApi.translate(data);
    loading.value = false;
    if (res.code === 200) {
      const text = res.data.translated || res.data.translated_text;
      content.value = text.replace(/\n/g, '<br/>');
    }
  };

  const handlerClick = () => {
    visable.value = false;
    content.value = '';
  };

  onMounted(() => {
    document.addEventListener('click', handlerClick);
  });

  onUnmounted(() => {
    document.removeEventListener('click', handlerClick);
  });

  defineExpose({
    translate
  })

</script>
<style lang="scss" scoped>
.wrap {
  position: fixed;
  background-color: #fff;
  border-radius: 6px;
  z-index: 9999;
  max-width: 500px;
  min-width: 300px;
  min-height: 50px;
  word-break: break-all;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 6px 0px;
}

.title {
  cursor: move;
  height: 30px;
  background-color: #bbb;
  text-align: left;
  line-height: 30px;
  padding-left: 10px;
}

.content {
  padding: 10px;
}
</style>